/**
 * 问号
 * @param radio 画布大小比例
 * @param color 颜色
 * @returns 数据地址
 */
const QuestionImage = (radio?: number, color?: string) => {
    const r = radio || 1;
    const col = color || '#ffffff';
    const canvas = document.createElement('canvas');
    canvas.width = canvas.height = 40 * r;
    const ctx = canvas.getContext('2d')!;

    ctx.save();
    ctx.miterLimit = 4;
    ctx.fillStyle = col;
    ctx.scale(0.04, 0.04);
    ctx.translate(0, -30 * r);
    ctx.beginPath();
    ctx.moveTo(450.267 * r, 772.245 * r);
    ctx.lineTo(450.267 * r, 864.756 * r);
    ctx.lineTo(542.778 * r, 864.756 * r);
    ctx.lineTo(542.778 * r, 772.245 * r);
    ctx.lineTo(450.267 * r, 772.245 * r);
    ctx.closePath();
    ctx.moveTo(689.448 * r, 452.28 * r);
    ctx.bezierCurveTo(702.986 * r, 427.91299999999995 * r, 709.759 * r, 401.289 * r, 709.759 * r, 372.405 * r);
    ctx.bezierCurveTo(709.759 * r, 322.467 * r, 690.498 * r, 279.88899999999995 * r, 651.994 * r, 244.69199999999998 * r);
    ctx.bezierCurveTo(613.477 * r, 209.49499999999998 * r, 561.88 * r, 191.892 * r, 497.197 * r, 191.892 * r);
    ctx.bezierCurveTo(436.12 * r, 191.892 * r, 387.006 * r, 208.292 * r, 349.855 * r, 241.07999999999998 * r);
    ctx.bezierCurveTo(312.69500000000005 * r, 273.878 * r, 290.358 * r, 321.11199999999997 * r, 282.841 * r, 382.783 * r);
    ctx.lineTo(366.327 * r, 392.71000000000004 * r);
    ctx.bezierCurveTo(373.545 * r, 346.68500000000006 * r, 388.737 * r, 312.83500000000004 * r, 411.903 * r, 291.177 * r);
    ctx.bezierCurveTo(435.069 * r, 269.512 * r, 463.95000000000005 * r, 258.683 * r, 498.55 * r, 258.683 * r);
    ctx.bezierCurveTo(534.352 * r, 258.683 * r, 564.588 * r, 270.64 * r, 589.261 * r, 294.557 * r);
    ctx.bezierCurveTo(613.928 * r, 318.47700000000003 * r, 626.271 * r, 346.232 * r, 626.271 * r, 377.82300000000004 * r);
    ctx.bezierCurveTo(626.271 * r, 395.27400000000006 * r, 622.049 * r, 411.37300000000005 * r, 613.6289999999999 * r, 426.107 * r);
    ctx.bezierCurveTo(605.204 * r, 440.85400000000004 * r, 586.9309999999999 * r, 460.63300000000004 * r, 558.7989999999999 * r, 485.45300000000003 * r);
    ctx.bezierCurveTo(530.6669999999998 * r, 510.273 * r, 511.1919999999999 * r, 529.154 * r, 500.35699999999986 * r, 542.09 * r);
    ctx.bezierCurveTo(485.6159999999999 * r, 559.844 * r, 474.9329999999999 * r, 577.4440000000001 * r, 468.3199999999999 * r, 594.8870000000001 * r);
    ctx.bezierCurveTo(459.29199999999986 * r, 618.0590000000001 * r, 454.7829999999999 * r, 645.5880000000001 * r, 454.7829999999999 * r, 677.471 * r);
    ctx.bezierCurveTo(454.7829999999999 * r, 682.889 * r, 454.9289999999999 * r, 691.01 * r, 455.2329999999999 * r, 701.845 * r);
    ctx.lineTo(533.3019999999999 * r, 701.845 * r);
    ctx.bezierCurveTo(533.901 * r, 669.35 * r, 536.1569999999999 * r, 645.879 * r, 540.074 * r, 631.445 * r);
    ctx.bezierCurveTo(543.977 * r, 617.005 * r, 550 * r, 604.216 * r, 558.121 * r, 593.0820000000001 * r);
    ctx.bezierCurveTo(566.2479999999999 * r, 581.9590000000001 * r, 583.5459999999999 * r, 564.6520000000002 * r, 610.0219999999999 * r, 541.1870000000001 * r);
    ctx.bezierCurveTo(649.43 * r, 506.288 * r, 675.908 * r, 476.656 * r, 689.448 * r, 452.28 * r);
    ctx.lineTo(689.448 * r, 452.28 * r);
    ctx.closePath();
    ctx.fill();
    ctx.restore();

    return canvas.toDataURL('image/png');
}


export { QuestionImage };